<template>
  <a-modal 
    :visible="visible"
    okText="提交" 
    cancelText="取消" 
    :title="title"
    :destroyOnClose="true"
    :maskClosable="false"
    :keyboard="false"
    @cancel="closeModal()" 
    @ok="handleSubmit">
    <a-form :form="form"  :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
      
      <a-form-item label="姓名">
        <a-input
          autocomplete="off"
          v-decorator="['userName', { rules: [{ required: true, message: '请填写权限名称' }] }]"
          placeholder="请输入姓名"
        />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input 
          autocomplete="off"
          v-decorator="['userPhone', {rules: [{ required: true, message: '请输入手机号' }] }]"
          placeholder="请输入手机号"
        />
      </a-form-item>
      <a-form-item label="用户角色">
        <a-select 
          showSearch
          allowClear
          style="width: 150px"
          :options="userRoleOptions"
          v-decorator="[
            'userRole',
             {rules: [{ required: true, message: '请选择角色' }] }
          ]"
          placeholder="请选择"
        >
        </a-select>
      </a-form-item>      
      <a-form-item label="身份类型">
        店员
      </a-form-item>
      <a-form-item label="状态">
        <a-radio-group 
          v-decorator="[
            'userStatus',
             {rules: [{ required: true, message: '请选择状态' }] }
          ]" :options="statusList"></a-radio-group>
      </a-form-item>
      <a-form-item label="员工二维码">
        <!-- <img :src="require('@/assets/images/bg.jpg')" style="width:100px;height:100px;"/> -->
        <!-- <a-upload
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <img class="avatar_img" v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">
              添加图片
            </div>
          </div>
        </a-upload> -->
        <ImageUploadList
          :limit="1"
          :multiple="false"
          :value="imageUrl">
        </ImageUploadList>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'user-info',
  props: {
    record: {
      type: Object,
      default() {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    title () {
      return this.record.id ? '修改员工' : '新增员工'
    },    
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
      loading: false,
      imageUrl: '',
      statusList:[
        {
          label:'停用',
          value:0,
        },{
          label:'启用',
          value:1
        }
      ],
      userRoleOptions:[
        {
          label:'角色1',
          value:1
        },{
          label:'角色2',
          value:2
        }
      ],
      userIdTypeOptions:[
        {
          label:'店长',
          value:1
        },{
          label:'店员',
          value:2
        }
      ]
    }
  },
  watch: {
    visible (value) {
      if (value && this.record.id) {
        this.$nextTick(()=> {
          const formItems = this.form.getFieldsValue();
          Object.keys(formItems).forEach(key => {
            formItems[key] = this.record[key]
          })
          this.form.setFieldsValue(formItems);
        })
      }
    }
  },
  created(){
    
  },
  methods: {
    // getBase64(img, callback) {
    //   const reader = new FileReader();
    //   reader.addEventListener('load', () => callback(reader.result));
    //   reader.readAsDataURL(img);
    // },
    //handleChange(info) {
      // if (info.file.status === 'uploading') {
      //   this.loading = true;
      //   return;
      // }
      // if (info.file.status === 'done') {
      //   // Get this url from response in real world.
      //   this.getBase64(info.file.originFileObj, imageUrl => {
      //     this.imageUrl = imageUrl;
      //     this.loading = false;
      //   });
      // }
    //},
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('你只能上传png或jpg图片!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('图像必须小于2MB！');
      }
      return isJpgOrPng && isLt2M;
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          let url = '/shop/user/add'
          console.log(this.record)
          //url = this.record.id ? `${url}/${this.record.id}/update` : url
          if(this.record.id){
            url='/shop/user/update'
          }
          this.$post(url, {...values}).then(res => {
            if (res && res.returnCode === 1000) {
              this.$message.success('保存成功！')
              this.closeModal(true)
            }
          })
        }
      });
    },
    closeModal (freshTable) {
      this.form.resetFields()
      this.$emit('cancel', freshTable)
    }
  }
}
</script>

<style lang="less" scoped>
  .avatar_img{
    max-width:104px;
  }
</style>
